<template>
  <div>
    <h2>商品展示</h2>
    <table>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>价格</td>
        <td>图片</td>
        <td>数量</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in goods" :key="i.id">
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.price}}</td>
        <td>{{i.img}}</td>
        <td>{{i.count}}</td>
        <td>
          <button>详情</button>
        </td>
      </tr>
    </table>
    <button @click="pagx(p-1)">上一页</button>
    <button v-for="i in page" :key="i" @click="pagx(i)">{{i}}</button>
    <button @click="pagx(p+1)">下一页</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      goods:[],
      page:[],
      previous:1,
      next:1,
      p:1
    }
  },
  mounted(){
    this.common();
  },
  methods:{
    common:function(){
      this.axios({
        url:'http://127.0.0.1:8000/app01/goods/',
        method:'get',
        params:{'p':this.p}
      }).then(res=>{
        this.goods=res.data.data.data;
        this.page=res.data.data.page;
        this.previous=res.data.data.previous;
        this.next=res.data.data.next;
      })
    },
    pagx:function(p){
      this.p=p;
      this.common();
    }
  }
}
</script>

<style>
*{
  margin:0 auto;
}
</style>
